html5 canvas-1.canvas介紹(hello canvas)
發(fā)布時(shí)間：2013-01-07 17:00:31 作者：佚名 
我要評(píng)論
我要評(píng)論大家都知道，目前并不是所有的瀏覽器中支持html5，就算是支持html5的瀏覽器，也不見(jiàn)得支持html5所有的新特性,建議大家使用firefox（開(kāi)發(fā)者的最愛(ài)）或者是chrome瀏覽器，我所有的例子都是基于firefox開(kāi)發(fā)的
從今天開(kāi)始，我們將開(kāi)始一個(gè)關(guān)于html5 canvas的系列課程。這個(gè)系列是我讀《HTML5 Canvas：Native Interactivity and Animation for the Web》后的總結(jié)，有興趣的朋友可以去下載英文原版書(shū)籍閱讀。這本書(shū)通過(guò)介紹canvas游戲開(kāi)發(fā)的方式，向我們展現(xiàn)canvas強(qiáng)大的功能，我覺(jué)得相當(dāng)不錯(cuò)，通過(guò)閱讀這本書(shū)我學(xué)到了canvas很多的知識(shí)。其實(shí)canvas本身的api并不多，關(guān)鍵是活學(xué)活用，學(xué)會(huì)對(duì)api的組合使用制作出令人難以置信的效果。而這本書(shū)就是你學(xué)習(xí)canvas最好的選擇，只可惜他暫時(shí)還沒(méi)有中文版，英文不好的朋友只有再等等了。
大家都知道，目前并不是所有的瀏覽器中支持html5，就算是支持html5的瀏覽器，也不見(jiàn)得支持html5所有的新特性。所以大家要選擇一款比較新的瀏覽器作為自己的調(diào)試環(huán)境，建議大家使用firefox（開(kāi)發(fā)者的最愛(ài)）或者是chrome瀏覽器，我所有的例子都是基于firefox開(kāi)發(fā)的。
html5相關(guān)的基礎(chǔ)知識(shí)這里就不做介紹了，網(wǎng)上有很多關(guān)于html5的教程，自行學(xué)習(xí)吧。學(xué)習(xí)html5需要大家有比較好的javascript的基礎(chǔ)，大家可以去湯姆大叔的博客進(jìn)行學(xué)習(xí)：http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html。其實(shí)他的這個(gè)系列課程還是有相當(dāng)難度的，50多篇全學(xué)好你應(yīng)該算是js專家了。
現(xiàn)在我們正式開(kāi)始我們的canvas課程，第一個(gè)例子：“hello canvas”。
首先需要在body中添加canvas標(biāo)簽，如下：
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
canvas中的text部分將會(huì)在瀏覽器不支持canvas對(duì)象時(shí)顯示。
定義了canvas標(biāo)簽，當(dāng)我們需要通過(guò)js對(duì)他進(jìn)行操作的時(shí)候，通過(guò)getElementById就可以實(shí)現(xiàn)。
var theCanvas = document.getElementById("canvasOne");我們現(xiàn)在已經(jīng)習(xí)慣使用jquery來(lái)開(kāi)發(fā)任務(wù)，那么使用jquery如何獲取canvas對(duì)象呢？
var canvas = $('#canvasOne').get(0);或var canvas = $('#canvasOne')[0];不知道大家注意到get(0)和[0]沒(méi)有，如果沒(méi)有使用get()方法或者[]下標(biāo)的話，你的js代碼將不能正常對(duì)canvas進(jìn)行操作。因?yàn)?('#canvasOne')獲取到的是一個(gè)jquery對(duì)象，而我們實(shí)際要操作的是一個(gè)html dom對(duì)象。這里有存在一個(gè)jquery對(duì)象轉(zhuǎn)變成dom對(duì)象的問(wèn)題，通過(guò)get()或者下標(biāo)的方式就完成了這個(gè)轉(zhuǎn)換。如果需要把一個(gè)dom對(duì)象轉(zhuǎn)換成jquery對(duì)象，可以使用$()方法實(shí)現(xiàn)。不清楚的朋友只有自己去百度了，這里不做深究。
為了代碼的健壯性，我們需要判斷你的瀏覽器是否支持canvas對(duì)象，可以通過(guò)下面代碼實(shí)現(xiàn)。
if (!theCanvas || !theCanvas.getContext) {
return;
}
不過(guò)推薦大家使用modernizr.js庫(kù)完成這一工作，這是一個(gè)很通過(guò)的html5 js庫(kù)，提供了很多有用的方法
function canvasSupport () {
return Modernizr.canvas;
}
canvas支持2d渲染，通過(guò)如下代碼實(shí)現(xiàn)：
var context = theCanvas.getContext("2d");
下面我們就可以通過(guò)context對(duì)象在canvas上繪制圖像了。
//設(shè)置區(qū)域顏色
context.fillStyle = "#ffffaa";
//繪制區(qū)域
context.fillRect(0, 0, 500, 300);
//設(shè)置字體
context.font = "20px _sans";
//設(shè)置垂直對(duì)齊方式
context.textBaseline = "top";
//繪制文字
context.fillText ("Hello World!", 195, 80);
//設(shè)置邊框顏色
context.strokeStyle = "#000000";
//繪制邊框
context.strokeRect(5, 5, 490, 290);
下面介紹下圖片的繪制。由于圖片的異步下載的，為了保證你用canvas繪制一個(gè)圖片時(shí)，該圖片已經(jīng)下載完畢，我們使用下面的方式：
var helloWorldImage = new Image();
helloWorldImage.src = "helloworld.gif";
helloWorldImage.onload = function () {
context.drawImage(helloWorldImage, 160, 130);
}
當(dāng)圖片下面完畢時(shí)，會(huì)觸發(fā)onload事件，這里再使用context對(duì)象繪制圖片。
大家下載demo看完整代碼，demo下載地址：html5canvas.helloworld.zip
大家都知道，目前并不是所有的瀏覽器中支持html5，就算是支持html5的瀏覽器，也不見(jiàn)得支持html5所有的新特性。所以大家要選擇一款比較新的瀏覽器作為自己的調(diào)試環(huán)境，建議大家使用firefox（開(kāi)發(fā)者的最愛(ài)）或者是chrome瀏覽器，我所有的例子都是基于firefox開(kāi)發(fā)的。
html5相關(guān)的基礎(chǔ)知識(shí)這里就不做介紹了，網(wǎng)上有很多關(guān)于html5的教程，自行學(xué)習(xí)吧。學(xué)習(xí)html5需要大家有比較好的javascript的基礎(chǔ)，大家可以去湯姆大叔的博客進(jìn)行學(xué)習(xí)：http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html。其實(shí)他的這個(gè)系列課程還是有相當(dāng)難度的，50多篇全學(xué)好你應(yīng)該算是js專家了。
現(xiàn)在我們正式開(kāi)始我們的canvas課程，第一個(gè)例子：“hello canvas”。
首先需要在body中添加canvas標(biāo)簽，如下：
復(fù)制代碼
代碼如下:<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
canvas中的text部分將會(huì)在瀏覽器不支持canvas對(duì)象時(shí)顯示。
定義了canvas標(biāo)簽，當(dāng)我們需要通過(guò)js對(duì)他進(jìn)行操作的時(shí)候，通過(guò)getElementById就可以實(shí)現(xiàn)。
var theCanvas = document.getElementById("canvasOne");我們現(xiàn)在已經(jīng)習(xí)慣使用jquery來(lái)開(kāi)發(fā)任務(wù)，那么使用jquery如何獲取canvas對(duì)象呢？
var canvas = $('#canvasOne').get(0);或var canvas = $('#canvasOne')[0];不知道大家注意到get(0)和[0]沒(méi)有，如果沒(méi)有使用get()方法或者[]下標(biāo)的話，你的js代碼將不能正常對(duì)canvas進(jìn)行操作。因?yàn)?('#canvasOne')獲取到的是一個(gè)jquery對(duì)象，而我們實(shí)際要操作的是一個(gè)html dom對(duì)象。這里有存在一個(gè)jquery對(duì)象轉(zhuǎn)變成dom對(duì)象的問(wèn)題，通過(guò)get()或者下標(biāo)的方式就完成了這個(gè)轉(zhuǎn)換。如果需要把一個(gè)dom對(duì)象轉(zhuǎn)換成jquery對(duì)象，可以使用$()方法實(shí)現(xiàn)。不清楚的朋友只有自己去百度了，這里不做深究。
為了代碼的健壯性，我們需要判斷你的瀏覽器是否支持canvas對(duì)象，可以通過(guò)下面代碼實(shí)現(xiàn)。
復(fù)制代碼
代碼如下:if (!theCanvas || !theCanvas.getContext) {
return;
}
不過(guò)推薦大家使用modernizr.js庫(kù)完成這一工作，這是一個(gè)很通過(guò)的html5 js庫(kù)，提供了很多有用的方法
復(fù)制代碼
代碼如下:function canvasSupport () {
return Modernizr.canvas;
}
canvas支持2d渲染，通過(guò)如下代碼實(shí)現(xiàn)：
var context = theCanvas.getContext("2d");
下面我們就可以通過(guò)context對(duì)象在canvas上繪制圖像了。
復(fù)制代碼
代碼如下://設(shè)置區(qū)域顏色
context.fillStyle = "#ffffaa";
//繪制區(qū)域
context.fillRect(0, 0, 500, 300);
//設(shè)置字體
context.font = "20px _sans";
//設(shè)置垂直對(duì)齊方式
context.textBaseline = "top";
//繪制文字
context.fillText ("Hello World!", 195, 80);
//設(shè)置邊框顏色
context.strokeStyle = "#000000";
//繪制邊框
context.strokeRect(5, 5, 490, 290);
下面介紹下圖片的繪制。由于圖片的異步下載的，為了保證你用canvas繪制一個(gè)圖片時(shí)，該圖片已經(jīng)下載完畢，我們使用下面的方式：
復(fù)制代碼
代碼如下:var helloWorldImage = new Image();
helloWorldImage.src = "helloworld.gif";
helloWorldImage.onload = function () {
context.drawImage(helloWorldImage, 160, 130);
}
當(dāng)圖片下面完畢時(shí)，會(huì)觸發(fā)onload事件，這里再使用context對(duì)象繪制圖片。
大家下載demo看完整代碼，demo下載地址：html5canvas.helloworld.zip
相關(guān)文章
HTML5之HTML元素?cái)U(kuò)展(上)—新增加的元素及使用概述
HTML5中加入了全新的結(jié)構(gòu)型元素，例如頁(yè)眉header，頁(yè)腳footer，導(dǎo)航nav，內(nèi)容article，章節(jié)section等除了這種整個(gè)頁(yè)面的結(jié)構(gòu)型元素，html5也加入了塊級(jí)別的語(yǔ)義元素,感興趣2013-01-31- 今天把網(wǎng)頁(yè)改成了HTML5的，調(diào)試了一下，在FF和Opera中都顯示正常了，到了IE6上卻變得面目全非了。GOOGLE了一下，發(fā)現(xiàn)了html5shiv這個(gè)項(xiàng)目，可以把HTML5的新元素轉(zhuǎn)換成IE6認(rèn)2011-11-23
- 學(xué)習(xí)w3c是看到一個(gè)檢測(cè)您的瀏覽器是否支持 HTML5 視頻的方法，在這里與大家分享下，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-28
幾個(gè)解決兼容IE6\7\8不支持html5標(biāo)簽的幾個(gè)方法
html5大行其道的時(shí)代已經(jīng)到來(lái),如果還在糾結(jié)于，是否應(yīng)該掌握html5和css3技術(shù)時(shí)，請(qǐng)狠狠的抽自己幾個(gè)嘴巴，然后，苦學(xué)吧！下面我們來(lái)看幾個(gè)解決兼容IE6\7\8不支持html5標(biāo)簽2013-01-07html5 瀏覽器支持 如何讓所有的瀏覽器都支持HTML5標(biāo)簽樣式
如今HTML5愈來(lái)愈引發(fā)大家的關(guān)注了，HTML5的開(kāi)發(fā)者將必須考慮向下兼容的問(wèn)題:如何讓所有的瀏覽器都能識(shí)別HTML5標(biāo)簽樣式2012-12-07input file上傳文件樣式支持html5的瀏覽器解決方案
最近在使用file上傳控件，發(fā)現(xiàn)了file上傳控件的兩個(gè)兼容性問(wèn)題:一個(gè)是file上傳控件在火狐下無(wú)法通過(guò)css改變width，另一個(gè)是file上傳控件在不同的瀏覽器下的外觀和行為都不2012-11-14- 越來(lái)越多的站點(diǎn)開(kāi)始使用 HTML5 標(biāo)簽，但是目前的情況是還有很多人在使用IE6、IE7、IE8。為了讓所有瀏覽者都可以正常的訪問(wèn)，解決方案有下面兩個(gè)2012-12-11
- 讓所有IE支持HTML5的解決方案.2009-10-20
如何讓IE9以下版本(ie6/7/8)認(rèn)識(shí)html5元素
瀏覽器不會(huì)給未知元素設(shè)定任何樣式（不同瀏覽器對(duì)元素會(huì)有不同的默認(rèn)樣式）在IE9之前的版本中，也不能對(duì)未知元素設(shè)定樣式，針對(duì)這個(gè)問(wèn)題有一個(gè)彌補(bǔ)方案，感興趣的朋友可以2013-04-01